<template>
	<view class="app-container">
		<view class="tab-list flex">
			<view v-for="item in tabList" :key="item.id" class="tab-item"
				:class="{ active: queryParams.cate === item.id }" @click="handleClickTab(item)">
				{{ item.name }}
			</view>
		</view>
		<swiper class="tab-swiper flex-1" :current-item-id="queryParams.cate" @change="handleTabSwiperChange">
			<swiper-item :item-id="1">
				<z-paging ref="paging1" class="tab-swiper-item shop-list" :fixed="false" :auto="false" v-model="barList"
					@query="getCollectBarList">
					<ListItem v-for="item in barList" :key="item.id" :type="1" :data="item.detail" :show-distance="false" class="list-item-box" />
				</z-paging>
			</swiper-item>
			<swiper-item :item-id="2">
				<z-paging ref="paging2" class="tab-swiper-item shop-list" :fixed="false" :auto="false" v-model="hotelList"
					@query="getCollectHotelList">
					<ListItem v-for="item in hotelList" :key="item.id" :type="1" :data="item.detail" :show-distance="false" class="list-item-box" />
				</z-paging>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		nextTick
	} from "vue";
	import {
		listCollect
	} from "@/api";
	import {
		onShow
	} from '@dcloudio/uni-app';

	const state = reactive({
		queryParams: {
			page: 1,
			limit: 10,
			cate: 1
		},
		tabList: [{
				id: 1,
				name: "网吧网咖"
			},
			{
				id: 2,
				name: "电竞酒店"
			}
		],
		barList: [],
		hotelList: []
	})

	const {
		queryParams,
		tabList,
		barList,
		hotelList
	} = toRefs(state)

	const paging1 = ref(null);
	const paging2 = ref(null);

	// 获取收藏网吧列表
	async function getCollectBarList(pageNum, pageSize) {
		const query = JSON.parse(JSON.stringify(queryParams.value));
		query.page = pageNum;
		query.limit = pageSize;
		query.cate = 1;
		const res = await listCollect(query);
		res.data.data.forEach(item => {
			item.detail.flags = item.detail.flags ? item.detail.flags.split(",") : ""
		})
		paging1.value.complete(res.data.data);
	}

	// 获取收藏酒店列表
	async function getCollectHotelList(pageNum, pageSize) {
		const query = JSON.parse(JSON.stringify(queryParams.value));
		query.page = pageNum;
		query.limit = pageSize;
		query.cate = 2;
		const res = await listCollect(query);
		res.data.data.forEach(item => {
			item.detail.flags = item.detail.flags ? item.detail.flags.split(",") : ""
		})
		paging2.value.complete(res.data.data);
	}

	// 点击tab切换
	function handleClickTab(item) {
		queryParams.value.cate = Number(item.id);
	}

	// tab轮播切换
	function handleTabSwiperChange(e) {
		queryParams.value.cate = Number(e.detail.currentItemId);;
	}
	
	onShow(() => {
		nextTick(async () => {
			paging1.value.reload();
			paging2.value.reload();
		})
	})
</script>

<style scoped lang="scss">
	.tab-list {
		height: 88rpx;
		column-gap: 65rpx;
		justify-content: center;
		background-color: #FFFFFF;
		margin-bottom: 22rpx;

		.tab-item {
			font-size: 28rpx;
			color: #808080;

			&.active {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				position: relative;
				transition: all 0.5s;

				&::after {
					content: "";
					display: block;
					position: absolute;
					bottom: -10rpx;
					left: 0;
					right: 0;
					margin: auto;
					width: 30rpx;
					height: 6rpx;
					border-radius: 3rpx;
					background-color: var(--primary-color);
				}
			}
		}
	}

	.tab-swiper {
		flex: 1;
		overflow: hidden;
		padding: 0 20rpx;

		.tab-swiper-item.shop-list {
			height: 100%;
			overflow-y: auto;
			
			::v-deep .list-item-box:last-of-type {
				.list-item {
					margin-bottom: 0;
				}
			}
		}
	}
</style>